<template>
  <div class="inline">

    <el-select v-if="showServerId" v-model="searchForm.serverId" class="filter-item" clearable filterable :loading="loading" placeholder="选择区服" @clear="serverClear('serverId')">
      <el-option
        v-for="item in serverList"
        :key="item.sid"
        :label="item.name"
        :value="item.sid"
      >
      </el-option>
    </el-select>
    <el-select v-if="showServerId2" v-model="searchForm.serverId2" class="filter-item" clearable filterable :loading="loading" placeholder="选择区服" @clear="serverClear('serverId2')">
      <el-option
        v-for="item in serverList"
        :key="item.sid"
        :label="item.name"
        :value="item.sid"
      >
      </el-option>
    </el-select>

    <el-input v-if="showKeyword" v-model="searchForm.keyword" clearable placeholder="搜索的关键字" class="keyword">
      <el-select v-if="kTypeList.length > 0" slot="prepend" v-model="searchForm.kType" class="k-type" placeholder="请选择" clearable @keyup.enter.native="handleFilter">
        <el-option v-for="item in kTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-input>

    <el-button v-if="showButton" class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
  </div>
</template>

<script>

export default {
  props: {
    showServerId: { type: Boolean, default: true },
    showServerId2: { type: Boolean, default: false },
    showKeyword: { type: Boolean, default: true },
    showButton: { type: Boolean, default: true },
    kTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      searchForm: {
        serverId: '',
        serverId2: '',
        kType: '',
        keyword: ''
      },
      keywordList: [],
      serverList: []
    }
  },
  created() {
    console.log('created')
  },
  methods: {
    handleFilter() {
      if (this.kTypeList.length <= 0) {
        this.searchForm.kType = ''
      }
      this.$emit('transferFilter', this.searchForm)
    },
    serverClear(field) {
      this.searchForm.field = null
    }

  }
}
</script>

<style>
  .filter-item {
    margin-right: 8px;
  }
  .k-type {
    width: 8em!important;
  }
  .keyword {
    width: 20em;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 8px;
  }
</style>
